<template>
	<view class="index">
		<view class="item-wrapper">
			<view class="title-wrapper">
				<view class="title">
					车辆信息
				</view>
			</view>
			<view class="form-wrapper">
				<view class="form-item">
					<view class="form-label require">
						车牌号
					</view>
					<view class="form-value" @tap="plateShow = true">
						<text v-if="plateNo">{{ plateNo }}</text>
						<text v-else class="placeholder">请输入</text>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label require">
						车辆类型
					</view>
					<view class="form-value" @click="openVehicleModel">
						<view class="input">
							<text v-if="form.vehicleModelName">{{ form.vehicleModelName }}</text>
							<text v-else class="placeholder">请选择</text>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						车长(米)
					</view>
					<view class="form-value">
						<input v-model="form.vehicleLength" type="number" class="input" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						最大载重(吨)
					</view>
					<view class="form-value">
						<input v-model="form.vehicleMaxLoad" type="number" class="input" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						车辆状态
					</view>
					<view class="form-value">
						<switch style="transform:scale(0.7)" :checked="status" @change="statusChange" />
						<text>{{ status ? '启用': '禁用' }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="item-wrapper">
			<view class="title-wrapper">
				<view class="title">
					司机信息
				</view>
			</view>
			<view class="form-wrapper">
				<view class="form-item">
					<view class="form-label require">
						司机姓名
					</view>
					<view class="form-value">
						<input v-model="form.driverName" maxlength="20" class="input" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-label require">
						司机电话
					</view>
					<view class="form-value">
						<input v-model="form.driverTel" maxlength="11" type="number" class="input" placeholder="请输入" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						身份证号
					</view>
					<view class="form-value">
						<input v-model="form.driverIdCardNo" maxlength="18" type="number" class="input"
							placeholder="请输入" />
					</view>
				</view>
			</view>
		</view>

		<view class="btn-wrapper">
			<view v-if="form.id" class="btn default" @click="del">
				删除
			</view>
			<view class="btn" @click="submit">
				提交
			</view>
		</view>

		<uni-popup ref="attrPopup">
			<view class="attr-popup-wrapper">
				<view class="attr-content-wrapper">
					<view class="item" @click="setAttr(item)" v-for="(item,index) in vehicleModelList" :key="index">
						<view class="label">
							{{ item.dictValue }}
						</view>
					</view>
				</view>
				<view class="attr-btn" @click="closeVehicleModel">
					取消
				</view>
			</view>
		</uni-popup>
		<plate-input v-if="plateShow" :plate="plateNo" @export="setPlate" @close="plateShow = false" />
	</view>
</template>

<script>
	import plateInput from '@/components/uni-plate-input/uni-plate-input.vue';
	export default {
		data() {
			return {
				vehicleModelList: [],
				form: {
					id: null,
					driverIdCardNo: null,
					driverIdCardPhoto: "-",
					driverName: null,
					driverTel: null,
					licensePlateNo: null,
					vehicleLength: null,
					vehicleMaxLoad: null,
					vehicleModel: null,
					vehicleModelName: null,
					vehicleState: "NORMAL",
				},
				plateNo: '',
				plateShow: false,
				inputDisabled: true,
				status: true
			}
		},
		onLoad(option) {
			this.getVehicleModel()
			if (option.id) {
				this.form.id = option.id;
				this.getInfo()
				uni.setNavigationBarTitle({
					title: "编辑车辆"
				})
			}
		},
		methods: {
			async getVehicleModel() {
				const data = await this.$api.get('/system/dict/data/type/vehicle_model')
				if (data.code === 200) {
					this.vehicleModelList = data.data
				}
			},
			async getInfo() {
				const data = await this.$api.get('/adm/transport/vehicle-driver/getInfo', {
					id: this.form.id
				})
				if (data.code === 200) {
					this.form = data.data
					this.status = data.data.vehicleState === 'NORMAL';
					this.plateNo = data.data.licensePlateNo;
				}
			},
			openVehicleModel() {
				this.$refs.attrPopup.open("bottom");
			},
			closeVehicleModel() {
				this.$refs.attrPopup.close();
			},
			setAttr(item) {
				this.form.vehicleModel = item.dictLabel;
				this.form.vehicleModelName = item.dictValue;
				this.closeVehicleModel();
			},
			setPlate(plate) {
				if (plate.length >= 7) this.plateNo = plate;
				this.plateShow = false;
				this.form.licensePlateNo = plate;
			},
			statusChange(e) {
				this.status = e.detail.value;
			},
			del() {
				this.$showModal({
					title: '提示',
					content: '确定删除该车辆？',
					success: async (res) => {
						if (res.confirm) {
							const data = await this.$api.del('/adm/transport/vehicle-driver/remove', [this
								.form.id
							])
							if (data.code === 200) {
								uni.showToast({
									title: '删除成功',
									duration: 2000
								})
								setTimeout(() => {
									let pages = getCurrentPages();
									let beforePage = pages[pages.length - 2];
									beforePage.$vm.downCallback();
									uni.navigateBack()
								}, 500)
							}
						}
					}
				})
			},
			async submit() {
				if (!this.form.licensePlateNo) {
					uni.showToast({
						title: '请输入车牌号',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.form.vehicleModel) {
					uni.showToast({
						title: '请选择车辆类型',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.form.driverName) {
					uni.showToast({
						title: '请输入司机姓名',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.form.driverTel) {
					uni.showToast({
						title: '请输入司机电话',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.status) {
					this.form.vehicleState = "NORMAL"
				} else {
					this.form.vehicleState = "DEACTIVATE"
				}

				const params = {
					...this.form
				};
				let data;
				if (this.form.id) {
					data = await this.$api.put('/adm/transport/vehicle-driver', params)
				} else {
					data = await this.$api.post('/adm/transport/vehicle-driver/create', params)
				}
				if (data.code === 200) {
					uni.showToast({
						title: '提交成功',
						duration: 2000
					})
					setTimeout(() => {
						let pages = getCurrentPages();
						let beforePage = pages[pages.length - 2];
						beforePage.$vm.downCallback();
						uni.navigateBack()
					}, 500)
				}
			}
		},
		components: {
			plateInput
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		.item-wrapper {
			background-color: #ffffff;
			margin: 20upx 20upx 0 20upx;
			border-radius: 20upx;
			padding: 25upx;

			&.error {
				box-shadow: 0 0 7upx red;
			}

			.title-wrapper {
				display: flex;
				align-items: center;

				.icon {
					margin-right: 5upx;
				}

				.title {
					height: 34upx;
					line-height: 34upx;
					font-size: 34upx;
					color: #222222;
					padding-left: 10upx;
					border-left: 8upx solid #555BFF;
				}

				.value {
					flex: 1;
					text-align: right;
					font-size: 32upx;
					color: #333333;

					&.black {
						color: #222222;
					}
				}

				.input {
					flex: 1;
					text-align: right;
					font-size: 32upx;
					color: #333333;
					margin-right: 10upx;
				}
			}

			.input-wrapper {
				padding-top: 15upx;

				.input {
					font-size: 32upx;
					padding: 10upx;
					height: 60upx;
				}

				.text-area {
					width: 100%;
					font-size: 32upx;
					height: 60upx;
					padding: 10upx;
				}
			}

			.tip {
				font-size: 26upx;
				color: #898989;
			}

			.form-wrapper {
				padding: 0 20upx;

				.form-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 32upx;
					margin-top: 30upx;
					height: 50rpx;
					line-height: 50rpx;

					.form-label {
						width: 200upx;
						color: #232323;

						&.require::after {
							content: '*';
							color: red;
						}
					}

					.form-value {
						flex: 1;
						color: #333333;
						display: flex;
						align-items: center;

						.placeholder {
							color: #777777;
						}

						.input {
							font-size: 32rpx;
						}
					}
				}
			}
		}

		.attr-popup-wrapper {
			min-height: 400upx;
			background-color: #ffffff;
			border-radius: 20upx 20upx 0 0;
			position: relative;
			bottom: calc(0upx - env(safe-area-inset-bottom));

			.title-wrapper {
				height: 88upx;
				background-color: #f5f5f5;
				display: flex;
				align-items: center;
				padding: 0 32upx;
				border-radius: 20upx 20upx 0 0;
				justify-content: space-between;
			}

			.attr-content-wrapper {
				max-height: 900rpx;
				overflow: auto;
			}

			.item {
				height: 108upx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 32upx;
				border-bottom: 2upx solid #efefef;
				font-size: 34upx;

				.label {
					color: #222222;
				}

				.value {
					color: #343434;
				}
			}

			.attr-btn {
				height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-top: 10rpx solid #efefef;
			}
		}

		.btn-wrapper {
			margin-top: 100rpx;
			padding: 0 20rpx;
			height: 100upx;
			width: 100%;
			display: flex;
			align-items: center;
			z-index: 1;


			.btn {
				border-radius: 10rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 2;
				height: 100%;
				background-color: #555BFF;
				color: #ffffff;

				&.default {
					flex: 1;
					margin-right: 20rpx;
					color: #232323;
					background-color: #ffffff;
					border: 1upx solid #cecece;
				}
			}
		}
	}
</style>